<template>
  <div class="app-container">
    <div class="head-container">
      <!-- 搜索 -->
      <el-button class="filter-item" size="mini" type="warning" icon="el-icon-search" @click.stop="toQuery">刷新</el-button>
    </div>
    <el-row>
      <el-col :span="user==='xiaxia'?16:24">
        <!--表格渲染-->
        <el-table id="orderList" ref="dataTable" :data="data" size="small" stripe style="width: 100%;">
          <el-table-column prop width="100" align="center" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="version" label="版本号" align="left"/>
          <el-table-column prop="remark" label="描述" align="center"/>
          <el-table-column prop="joinCount" label="参与人数" align="center"/>
          <el-table-column prop="count" label="问卷份数" align="center"/>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-s-opportunity" @click.stop="exportCode(scope.row.version)">导出随机码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col v-if="user==='xiaxia'" :span="8">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="90px">
          <el-form-item label="版本号" prop="version">
            <el-input v-model="form.version" placeholder="请填写版本号" style="width: 330px;"/>
          </el-form-item>
          <el-form-item label="生成数量" prop="count">
            <el-input v-model="form.count" style="width: 330px;"/>
          </el-form-item>
          <el-form-item label="描述" prop="remark">
            <el-input v-model="form.remark" type="textarea" rows="5" style="width: 330px;"/>
          </el-form-item>
        </el-form>
        <div class="text-center"><el-button type="primary" @click.stop="doSubmit">生成问卷</el-button></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { validatInt } from '@/utils/validate'
import { getToken } from '@/utils/auth'
import { questionRandomCode, questionRandomCodeInsert } from '@/api/backApi'

export default {
  mixins: [initData],
  data() {
    const validateSort = (rule, value, callback) => {
      if (value) {
        if (!validatInt(value) || isNaN(parseInt(value)) || parseInt(value) <= 0) {
          callback(new Error('请填写正确的数字'))
        } else if (value.length > 6) {
          callback(new Error('长度不能超过6个字符'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      sup_this: this,
      versionList: [],
      query: {},
      user: getToken(),
      form: { remark: '', version: '', count: 0 },
      rules: {
        remark: [{ required: true, trigger: ['blur', 'change'], message: '请填写描述' }],
        version: [
          { required: true, trigger: ['blur', 'change'], message: '请填写版本号' },
          { min: 1, max: 6, message: '版本号在 1 到 6 个字符', trigger: ['blur', 'change'] }
        ],
        count: [
          { required: true, trigger: ['blur', 'change'], message: '请填写生成数量' },
          { type: 'count', trigger: ['blur', 'change'], validator: validateSort }
        ]
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      const query = this.query
      this.url = '/question/statistics/version'
      this.params = {
        version: query.version
      }
      return true
    },
    toQuery() {
      this.init()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$store.dispatch('LoadMask')
          this.params = {
            version: this.form.version,
            remark: this.form.remark,
            count: this.form.count
          }
          questionRandomCodeInsert(this.params).then(res => {
            this.$notify({
              title: '生成成功',
              position: 'bottom-right',
              type: 'success',
              duration: 2500
            })
            this.init()
            this.resetForm()
          })
        } else {
          return false
        }
      })
    },
    exportCode(version) {
      questionRandomCode({ version: version }).then((res) => {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)

        link.download = '访问连链接' // 下载的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
      this.form.roleIdList = []
      this.params = {}
      this.dialog = false
    }
  }
}
</script>

<style>
</style>
